<template>
    <div>
        <van-grid :border="false" :column-num="1">
            <van-grid-item id="hz" v-for="item in zhuantishuju" :key="item.id">
              <van-image :src="item.scene_pic_url" />
              <div id="title">{{item.title}}</div>
              <div id="jieshao">{{item.subtitle}}</div>
              <div id="jiage"> ￥{{item.price_info |jiage()}}元</div>
             
                &nbsp;
                &nbsp;
                &nbsp;
            </van-grid-item>
          
          </van-grid>
        
        <div id="bujinqi">
            <div id="left" class="active" @click="fun1(1)">上一页</div>
            <div id="right" @click="fun1(2)">下一页</div>

        </div>
        <!-- <van-pagination id="bujinqi" v-model="currentPage" :page-count="2" mode="simple" @click="jiazai"/> -->
            <v-slot></v-slot>
    </div>
</template>

<script>
import { ref } from 'vue';
import vSlot from '../components/dibu.vue'

import {Getzhuantiyemian} from '../request/app.js'
export default {    
    components:{
        vSlot
    },

    data() {
        return {
            zhuantishuju:[],
            currentPage:1

        };
    },
    created(){
        Getzhuantiyemian().then(res=>{
            // console.log(res);
            this.zhuantishuju = res.data.data
        })
    },
    filters:{
        jiage:function(value){
            let val=''
      if(!isNaN(value) ){
        if(value %1==0){//整数
          val=value+".00"
        }
     
        else{//小数
          val=parseFloat(value).toFixed(2)
        }
      }
      return val
        }
    },  
    mounted() {
        
    },

    methods: {
      fun1(num){
        Getzhuantiyemian(num).then(res=>{
            // console.log(res);
            this.zhuantishuju = res.data.data
            

        })
        scrollTo(0,0)
      },
     
    },
};
</script>

<style  scoped>
    #title{
        font-size: 18px;
        margin-bottom: 10px;
    }
    #jieshao{
        width: 300px;
        height: 23px;
        font-size: 15px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
        text-align: center;
    }
    #jiage{
        color: #8d0000;
    }   
    #hz{
        margin-bottom:20px ;

    }
    #bujinqi{
        margin-bottom: 80px;
        width: 100%;
        height: 50px;
        background-color: #efefef;

    }
    #left{
        width: 50%;
        height: 30px;
        background-color: #fff;
        float: left;
        text-align: center;
        line-height:30px ;
    }
    #right{
        width: 50%;
        height: 30px;
        background-color: #fff;
        float: right;
        text-align: center;
        line-height:30px ;
    }
    .active{
        background-color: #efefef;

    }
    .van-pagination__page-desc{
        display: none;
    }
</style>